<template>
	<div class="product-add">
		<el-form
			:model="product"
			:rules="rules"
			ref="productRef"
			status-icon
			label-position="right"
			label-width="100px"
		>
			<el-form-item label="商品分类">
				<el-select v-model="product.categoryId" placeholder="请选择商品分类">
					<el-option
						v-for="item in categoryList"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="productname" label="商品名">
				<el-input v-model="product.productname"></el-input>
			</el-form-item>
			<el-form-item label="店铺名">
				<el-input v-model="product.shop"></el-input>
			</el-form-item>
			<el-form-item label="图片">
				<!--
					action 上传图片服务地址
				    list-type 图片样式 picture-card
					auto-upload 选中图片直接上传
					show-file-list  支持多图片显示

					before-upload 上传之前执行, 验证图片格式和大小
					on-change 选中图片执行
					on-success 上传成功回调，返回响应内容
				-->
				<el-upload
					name="headerImg"
					:action="uploadUrl"
					list-type="picture-card"
					:auto-upload="true"
					:show-file-list="false"
					:before-upload="beforeAvatarUpload"
					:on-change="onChangeFile"
					:on-success="handleAvatarSuccess"
				>
					<img v-if="imageUrl" :src="imageUrl" class="avatar" />
					<el-icon v-else><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item label="原价">
				<el-input v-model="product.price"></el-input>
			</el-form-item>
			<el-form-item label="现价">
				<el-input v-model="product.oldPrice"></el-input>
			</el-form-item>

			<el-form-item label="是否上架">
				<el-radio-group v-model="product.putaway">
					<el-radio label="1" size="large">上架</el-radio>
					<el-radio label="0" size="large">下架</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onAddProduct">添加</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { RequestCategoryList, RequestAddProduct } from '@/api/product'
import { Plus } from '@element-plus/icons-vue'
import { baseURL } from '@/utils/request.js'
export default {
	components: {
		Plus,
	},
	data() {
		return {
			product: {
				shop: '', //店铺名称
				productname: '', //商品名称
				picture: '',
				price: '',
				oldPrice: '',
				putaway: '1', //是否架上架:1下架:0
				categoryId: '', //分类id
			},
			rules: {
				productname: [{ required: true, message: '请输入商品名', trigger: 'blur' }],
			},
			categoryList: [],
			imageUrl: '',
			uploadUrl: baseURL + '/api/uploadFile',
			picurl: '', //上传图片地址
		}
	},
	methods: {
		async onAddProduct() {
			let product = { ...this.product, picture: this.picurl }
			let data = await RequestAddProduct(product)
			let { resultCode, resultInfo } = data
			if (resultCode == 1) {
				ElMessage.info('添加成功!')
			}
		},
		async getCategoryList() {
			let data = await RequestCategoryList()
			let { resultCode, resultInfo } = data
			if (resultCode == 1) {
				this.categoryList = resultInfo.list
			}
		},

		// 上传之前执行，一般验证图片大小和格式
		beforeAvatarUpload(rawFile) {
			let picArr = ['image/jpeg', 'image/png']
			if (picArr.indexOf(rawFile.type) == -1) {
				ElMessage.error('上传图片必须是jpeg或png图片')
				return false // 终止上传
			} else if (rawFile.size / 1024 / 1024 > 2) {
				// 不大于2m
				ElMessage.error('图片大小超过 2MB!')
				return false
			}
			return true
		},
		onChangeFile(file) {
			console.log('onChangeFile ', file)
			this.imageUrl = URL.createObjectURL(file.raw)
		},
		//上传成功回调
		handleAvatarSuccess(response, uploadFile) {
			//uploadFile.response.resultInfo.url上传成功返回的url
			this.picurl = uploadFile.response.resultInfo.url
		},
	},
	created() {
		this.getCategoryList()
	},
}
</script>
<style lang="scss" scoped>
.product-add {
	width: 800px;
	.el-form {
		width: 100%;
		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
}
</style>
